<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-tab layui-tab-card quanpin" lay-filter="test">
            <ul class="layui-tab-title">
                <li class="layui-this">全部订单</li>
                <li>待支付{$row.waitPay}条</li>
                <li>待发货{$row.waitDeliver}条</li>
                <li>待收货{$row.waitReceived}条</li>
                <li>已完成{$row.Completed}条</li>
            </ul>
            <div class="layui-tab-content quanpin">
                <div class="layui-tab-item layui-show quanpin">
                    <iframe class="iframebox quanpin" src="/admin/jizhan.store_order_tab/index.html?type=all" frameborder="0" id='id1' height="100%" width="100%" ></iframe>
                </div>
                <div class="layui-tab-item quanpin">
                    <iframe class="iframebox quanpin" src="" frameborder="0" id='id2' height="100%" width="100%" ></iframe>
                </div>
                <div class="layui-tab-item quanpin">
                    <iframe class="iframebox quanpin" src="" frameborder="0" id='id3' height="100%" width="100%" ></iframe>
                </div>
                <div class="layui-tab-item quanpin">
                    <iframe class="iframebox quanpin" src="" frameborder="0" id='id4' height="100%" width="100%" ></iframe>
                </div>
                <div class="layui-tab-item quanpin">
                    <iframe class="iframebox quanpin" src="" frameborder="0" id='id5' height="100%" width="100%" ></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use('element',function(){
        var element = layui.element;
        //监听tabs切换
        element.on('tab(test)', function (data) {
            console.log(data.index);
            if(data.index==1){
//这里判断 iframe 的地址是否包含页面名称字段，不包含则添加对应页面src，添加一次之后不会重复添加
                if(document.getElementById('id2').src.indexOf('waitPay') == -1){
                    $('#id2').attr('src', '/admin/jizhan.store_order_tab/index.html?type=waitPay');
                }else{
                    $('#id2').attr('src', '/admin/jizhan.store_order_tab/index.html?type=waitPay');
                    // return false
                }
            }
            else if(data.index==2){
                if(document.getElementById('id3').src.indexOf('waitDeliver') == -1){
                    $('#id3').attr('src', '/admin/jizhan.store_order_tab/index.html?type=waitDeliver');
                }else{
                    $('#id3').attr('src', '/admin/jizhan.store_order_tab/index.html?type=waitDeliver');
                }
            }
            else if(data.index==3){
                if(document.getElementById('id4').src.indexOf('waitReceived') == -1){
                    $('#id4').attr('src', '/admin/jizhan.store_order_tab/index.html?type=waitReceived');
                }else{
                    $('#id4').attr('src', '/admin/jizhan.store_order_tab/index.html?type=waitReceived');
                }
            }
            else if(data.index==4){
                if(document.getElementById('id5').src.indexOf('completed') == -1){
                    $('#id5').attr('src', '/admin/jizhan.store_order_tab/index.html?type=completed');
                }else{
                    $('#id5').attr('src', '/admin/jizhan.store_order_tab/index.html?type=completed');
                }
            }
        })
    })

</script>
<style>
    .layuimini-container{
        height: 100%;
    }
    .layuimini-main{
        height: 100%;
    }
    .layui-tab-card>.layui-tab-title {
        background-color: #1e9fff;
    }
    .quanpin{
        height: 100%;
        width: 100%;
    }
</style>